import React, {Fragment} from 'react';
import {Avatar, Layout, Menu, Popover, Space} from "antd";
import './NavigateHeaderComponent.css' ;
import {LoginConstant} from "constant/LoginConstant";
import {Link} from "react-router-dom";
import MysqlStateComponent from "./MysqlStateComponent";

const { Header } = Layout;
const items = [
    {
        key: 'user-login',
        label: <Link to={"/login"}>用户登录</Link>,
    },
    {
        key: 'user-login-out',
        label: '退出登录',
    },
    {
        key: 'user-status',
        label: '用户状态',
    },

] ;

const NavigateHeaderComponent = () => {

    const content = (
        <div>
            <p>用户身份: {localStorage.getItem(LoginConstant.IDENTITY)}</p>
            <p>登录时间: {localStorage.getItem(LoginConstant.LOGIN_TIME)}</p>
            <p>过期时间: {localStorage.getItem(LoginConstant.EXPIRATION_TIME)}</p>
        </div>
    );
    return (
        <Fragment>
            <Header className={"project-header"}>
                <div className="project-logo">
                    <img className={"logo-icon"} src="https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg"
                         alt="ProComponents" height="40"/>
                    <span className={"logo-title"}>ProComponents</span>
                </div>

                <div className="project-header-right">
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['2']}
                        items={items}
                    />
                    <MysqlStateComponent/>
                    <Space>
                        <Popover content={content} title="用户信息">
                            <Avatar style={{backgroundColor: '#f40', verticalAlign: 'middle'}} size="large" gap={5}>
                                {localStorage.getItem(LoginConstant.USERNAME)}
                            </Avatar>
                        </Popover>
                    </Space>
                </div>
            </Header>
        </Fragment>
    );
};

export default NavigateHeaderComponent;